<!DOCTYPE html>
<html>
<head>
    <title>鼠标移动Div --事例</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <style type="text/css">
    .drag{
          position:absolute;
          width:100px; height:100px;
          border:1px solid #96C2F1; background-color: #EFF7FF;
          cursor:move; line-height:100px; text-align:center;
    }
    #shadow-div {
        top: 0;
        left: 0;
        z-index: 8012;
        background: url('fancybox_overlay.png');
        position: fixed;
        bottom: 0;
        right: 0;
    }
    #show-img{
        text-align:center;
        vertical-align:middle;
        display:table-cell;
        background: #FFF;
        position: absolute;
        left:200px;
        top:30px;
        padding:10px;
    }
    </style>
    <script type="text/javascript">
        (function (document) {
            //Usage: $("#id").drag()  
            //Author: hooyes
            $.fn.Drag = function () {
                var M = false;
                var Rx, Ry;
                var t = $(this);
            t.mousedown(function (event) {
                    Rx = event.pageX - (parseInt(t.css("left")) || 0);
                    Ry = event.pageY - (parseInt(t.css("top")) || 0);
                    t.css("position", "absolute").css('cursor', 'move');
                    M = true;
                })
            .mouseup(function (event) {
                M = false; 
            });
                $(document).mousemove(function (event) {
                    if (M) {
                        t.css({ top: event.pageY - Ry, left: event.pageX - Rx });
                    }
                });
            }
        })(document);


        $(document).ready(function () {
            $("#Div1").Drag();
            
        });
    </script>
</head>
<body>
    <div id='shadow-div'><div id='show-img'><div id='Div1' class='drag'>hooyes</div><a class='close'></a></div></div></div>

</body>
</html>